﻿<div [@routerTransition]>
    <h3 class="form-title">{{l("SignUp")}}</h3>

    <form #registerForm="ngForm" class="login-form" method="post" novalidate (ngSubmit)="save()">

        <p class="hint">
            {{l("PersonalInformations")}}
        </p>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("Name")}}</label>
            <input class="form-control placeholder-no-fix" autoFocus type="text" placeholder="{{l('Name')}}" [(ngModel)]="model.name" name="Name" required maxlength="32" />
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("Surname")}}</label>
            <input class="form-control placeholder-no-fix" type="text" placeholder="{{l('Surname')}}" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("EmailAddress")}}</label>
            <input class="form-control placeholder-no-fix" type="email" placeholder="{{l('EmailAddress')}}" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
        </div>

        <p class="hint">
            {{l("AccountSettings")}}
        </p>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("UserName")}}</label>
            <input class="form-control placeholder-no-fix input-ltr" type="text" autocomplete="off" placeholder="{{l('UserName')}}" name="UserName" [(ngModel)]="model.userName" required maxlength="32" />
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("Password")}}</label>
            <input type="password" name="Password" class="form-control" [(ngModel)]="model.password" #Password="ngModel" placeholder="{{l('Password')}}" validateEqual="PasswordRepeat"
                   reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                   [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                   required>
        </div>
        <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group">
            <ul class="help-block text-danger" *ngIf="Password.errors">
                <li [hidden]="!Password.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                <li [hidden]="!Password.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}</li>
                <li [hidden]="!Password.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}</li>
                <li [hidden]="!Password.errors.requireNonAlphanumeric">{{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}</li>
                <li [hidden]="!Password.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint", passwordComplexitySetting.requiredLength)}}</li>
            </ul>
        </div>
        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("PasswordRepeat")}}</label>
            <input type="password" name="PasswordRepeat" class="form-control" [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel" placeholder="{{l('PasswordRepeat')}}" validateEqual="Password"
                   reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                   [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                   required>
        </div>
        <div [hidden]="registerForm.form.valid || registerForm.form.pristine" class="form-group">
            <ul class="help-block text-danger" *ngIf="PasswordRepeat.errors">
                <li [hidden]="!PasswordRepeat.errors.requireDigit">{{l("PasswordComplexity_RequireDigit_Hint")}}</li>
                <li [hidden]="!PasswordRepeat.errors.requireLowercase">{{l("PasswordComplexity_RequireLowercase_Hint")}}</li>
                <li [hidden]="!PasswordRepeat.errors.requireUppercase">{{l("PasswordComplexity_RequireUppercase_Hint")}}</li>
                <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">{{l("PasswordComplexity_RequireNonAlphanumeric_Hint")}}</li>
                <li [hidden]="!PasswordRepeat.errors.requiredLength">{{l("PasswordComplexity_RequiredLength_Hint", passwordComplexitySetting.requiredLength)}}</li>
            </ul>
        </div>
        <p *ngIf="useCaptcha" class="hint">
            {{l("Captha_Hint")}}
        </p>

        <div *ngIf="useCaptcha" class="form-group margin-bottom-20">
            <re-captcha (resolved)="captchaResolved($event)" [siteKey]="recaptchaSiteKey"></re-captcha>
        </div>

        <div class="form-actions">
            <button [disabled]="saving" routerLink="/account/login" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> {{l("Back")}}</button>
            <button type="submit" class="btn btn-success uppercase" [disabled]="!registerForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-check"></i> {{l("Submit")}}</button>
        </div>

    </form>
</div>